<template>
  <div class="login-container">
    <div class="login-box">
      <el-form ref="loginFormRef" :model="loginForm" label-width="0px" class="login-form" :rules="loginRules">
        <h5 class="main-title">网上商城</h5>
        <h3 class="sub-title">登录</h3>
        <el-form-item prop="uid">
          <el-input prefix-icon="user" v-model="loginForm.userName" :rules="loginRules.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input prefix-icon="lock" type="password" v-model="loginForm.password" :rules="loginRules.password" placeholder="请输入密码"></el-input>
        </el-form-item>
          <el-row justify="end">
            <el-form-item class="login-btn">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="reset">重置</el-button>
              <el-button type="primary" @click="addUser">注册</el-button>
            </el-form-item>
          </el-row>
      </el-form>
    </div>
  </div>
  <add-user-component :dialogVisible="dialogVisible" @closeDialog="closeDialog"/>
  <router-view/>
</template>

<script setup>
import { inject, reactive, ref } from 'vue'
import AddUserComponent from '@/components/SysUser/AddUser/AddUserComponent.vue'
// import router from '@/router'

const dialogVisible = ref(false)

const axios = inject('$axios')
const loginForm = reactive({
  userName: '',
  password: ''
})

const loginRules = reactive({
  username: [
    { required: true, message: '账号必填！', trigger: 'blur' },
    { min: 3, max: 12, message: '账号长度介于3-12之间！', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码必填！', trigger: 'blur' }
  ]
})

const login = async () => {
  try {
    const result = await axios.post('/logic/sysuser/login', loginForm)
    if (result.data.code === 200) {
      window.sessionStorage.setItem('team08', result.data.msg)
      window.history.back()
      // const userType = result.data.data.type
      // router.push('/')
      // if (userType === '用户') {
      //   router.push('/HomePage')
      // } else if (userType === '管理员') {
      //   router.push('/manage')
      // }
      // else if (userType === '工程师') {
      //   router.push('/engineermenu/selectorder')
      // }
    } else {
      console.error('登录失败：', result.data.msg)
    }
  } catch (error) {
    console.error('登录时出错：', error)
  }
}

const reset = () => {
  loginForm.userName = ''
  loginForm.password = ''
}

const addUser = () => {
  dialogVisible.value = true
}

const closeDialog = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background: #f2f2f2;
  font-family: 'Arial', sans-serif;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #e7e7e7;
}

.login-box {
  width: 500px;
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.main-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 30px;
  color: #333;
}

.sub-title {
  text-align: center;
  margin-bottom: 35px;
  font-size: 22px;
  color: #666;
}

.login-form {
  width: 100%;
}

.login-btn {
  display: flex;
  justify-content: space-between;
}

.el-input {
  width: 100%;
}
</style>
